<script setup>
  import { defineProps, defineEmits,ref } from 'vue';
  import BookDetail from "@/components/BookDetail.vue";

  // ------------------------- 显示页面 -----------------------------
  // 组件参数：接收来自父组件的数据
  const props = defineProps({
    bookList: {
      type: Array,
      required: true,
    }, // 要显示的书籍列表
    currentPage: {
      type: Number,
      required: true,
    }, // 第几页
    pageSize: {
      type: Number,
      required: true,
    }, // 每页显示几条
    totalItems: {
      type: Number,
      required: true,
    } // 总记录数
  });
  // 处理翻页，参数就是当前页码
  const emit = defineEmits();
  const handleCurrentChange = (pageNum) => {
    emit('change-page', pageNum);
  };

  // ------------------------- 书籍详情弹窗 -----------------------------
  const dialogVisible = ref(false)
  const bookId = ref(null)
  //处理对话框关闭的事件，接收子组件传过来的false
  const handleClose = (visible) =>{
    //将对话框的显示状态设置为false
    dialogVisible.value = visible;
  }
  //显示书籍
  const showDetail=(id)=>{
    dialogVisible.value = true;
    bookId.value = id;
  }
</script>

<template>
  <div>
    <!-- gutter：设置每个列之间间隔 -->
    <el-row :gutter="20">
      <!-- 每行显示6个 -->
      <el-col :span="4" v-for="book in bookList"
              :key="book.id" style="margin-bottom: 25px;">
        <!-- 鼠标移上才显示阴影 -->
        <el-card :body-style="{ padding: '8px' }" shadow="hover">
          <!-- 按钮上显示图片，按钮可以点击 -->
          <el-image style="width: 100%; height: 200px;"
                    @click="showDetail(book.id)"
                    :src="$urlImage + book.imgSrc" fit="fill"/>
          <!-- 显示书籍信息-->
          <div class="book-info">
            <el-popover trigger="hover">
              <template #reference>
                <div style="margin-bottom: 5px; font-weight: bold;">
                  书名：{{ book.name }}</div>
              </template>
              <div v-html="book.name"></div>
            </el-popover>
            <div style="margin-bottom: 5px; color: #666;">
              价格：&yen;{{ book.price }}</div>
            <el-popover trigger="hover">
              <template #reference>
                <div style="color: #666;">
                  作者：{{ book.author }}</div>
              </template>
              <div v-html="book.author"></div>
            </el-popover>
            <div>销量：{{ book.buyCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="text-align: center">
        <!-- 分页组件 -->
        <el-pagination background
                       layout="prev, pager, next, jumper"
                       :current-page="currentPage"
                       :page-size="pageSize"
                       :total="totalItems"
                       @current-change="handleCurrentChange"/>
      </el-col>
    </el-row>
    <!-- 显示详情的对话框，默认不可见 -->
    <book-detail :dialogVisible="dialogVisible" :bookId="bookId"
                 @close="handleClose"/>
  </div>
</template>

<style scoped>
  /* 主容器的背景和内边距 */
  div {
    background-color: #f9f9f9; /* 浅灰色背景 */
    padding: 5px;
  }
  /* 书籍信息区域 */
  .book-info {
    padding: 5px; /* 调整内边距 */
    font-size: 14px; /* 字体大小 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px; /* 最大宽度 */
    transition: all 0.3s ease; /* 添加过渡效果 */
  }
  /* 每本书卡片 */
  .el-card {
    transition: box-shadow 0.3s ease; /* 添加过渡效果 */
  }
  /* 鼠标悬停时添加阴影 */
  .el-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 更显著的阴影效果 */
  }
  /* 书名、价格、作者、销量样式 */
  .book-info div {
    margin: 3px 0; /* 上下间距减小 */
    color: #333; /* 深色文字 */
  }
  /* 分页样式 */
  .el-pagination {
    margin-top: 20px; /* 顶部间距 */
  }
  /* 分页按钮的自定义样式 */
  .el-pagination .el-button {
    background-color: #409EFF; /* 主色调 */
    color: white; /* 文字颜色 */
  }
  /* 分页按钮悬停效果 */
  .el-pagination .el-button:hover {
    background-color: #66b1ff; /* 悬停时颜色变化 */
    color: white;
  }
  /* 图片样式 */
  .el-image {
    border-radius: 8px; /* 圆角效果 */
    overflow: hidden; /* 防止超出 */
  }
</style>